<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
<body>
<div id="app">
    {{msg}}
    <p>
        {{msg1}}
    </p>
</div>

</body>
<script>
    var arr = '大河上下顿失滔滔'
    var app = new Vue({
        el:'#app',
        data:{
            msg:'Hello Vue!',
            another:'another Hello Vue!'
        },
        // 监听，只能监听其中方法中指定的msg值的变化（这里包括msg）
        watch:{
            msg:function (newval,oldval) {
                console.log('newval is:' +newval)
                console.log('oldval is:' +oldval)
            }
        },
        // 监听，监听在function中存在的变量的值（这里包括msg，another）
        computed:{
            msg1:function () {
                return 'computed:' + this.msg + ',' +this.another + ',' + arr
            }
        }
    })
</script>
</html>